<template>

<div class="item"  :style="{ backgroundColor:color }">
    
    <div class="left">

        <div style="font-size: 24px;">{{ name }}</div>
     
        <div>{{desc}}</div>
    </div>

    <div class="right">

        <div style="font-size: 30px;font-weight: bold;">{{num }}</div>
    </div>
</div>

</template>
<script setup name="ItemCard">
const props = defineProps({
  color: {
    type: String,
    default: 'white' // 设置宽度的默认值
  },
  name:{
    type: String,
    default: '名称' // 设置宽度的默认值
  },num:{
    type: Number,
    default: 10 // 设置宽度的默认值
  },desc:{
    type: String,
    default: '描述' // 设置宽度的默认值
  },
});
</script>

<style scoped>
.item{
    width: 18%;
    height: 100px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
}
.left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.right{
    width: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
</style>